<template>
	<view class="uni-page">
		<page-header :title = "title" 
					 :isExample = "isExample" 
					 :isDerivation = "isDerivation"
					 :isMore = "isMore" 
					 :isShow = "isShow" 
					 :list = "list"  
					 @chageWordData="getWordData">
				<text slot="inputData">
					<input class="input-text" type="text" 
						confirm-type="搜索"
						v-model="keyword" 
						@blur="clearData" 
						@confirm="getWordData" 
					placeholder="请输入关键词..."/>
				</text>
		</page-header>
		<page-ad v-if="isAd"></page-ad>
	</view>
</template>

<script>
	import pageHeader from '@/components/page-header.vue'
	import pageAd from '@/components/page-ad.vue'
	export default {
		data() {
			return {
				title: '[释义]',
				keyword: '',
				isShow: false,
				isMore: false,
				isExample: false,
				isDerivation: false,
				isAd: true,
				list: []
			};
		},
		components: {
			pageHeader,
			pageAd
		},
		methods: {
			getWordData() {
				let keyword = this.keyword.trim();
				if(keyword == "") {
					uni.showToast({
						title: '关键词不能为空！',
						mask: false,
						icon: 'none',
						duration: 1500
					});
					return;
				}
				const url = "http://47.100.213.135:3000/idiom/" + keyword;
				uni.showLoading({
					title: '正在查询中...',
					mask: false
				});
				uni.request({
					url: url,
					method: 'GET',
					success: res => {
						uni.hideLoading();
						// console.log(res.data.result.length);
						if(res.data.result.length == 0) {
							uni.showToast({
								title: '查无此成语!',
								mask: false,
								icon: 'none',
								duration: 1500
							});
							return;
						}
						console.log(res.data.result[0].derivation.length);
						if(res.data.result[0].derivation){
							this.isDerivation = true;
						}
						if(res.data.result[0].explanation){
							this.isExample = true;
						}
						if(res.data.result[0].more){
							this.isMore = true;
						}
						this.list = res.data.result[0];
						this.isShow = true;
						this.isAd = false;
					}
				});
			},
			clearData() {
				if(this.keyword == "") {
					this.isShow = false;
					this.isAd = true;
				}
			}
		}
	}
</script>

<style>

</style>
